<div class="act-page-container">
    <div>
        <a href="./myhero/act-publish">发布信息</a>
        <nz-card>
            <nz-header>{{filter}}</nz-header>
            <nz-card>
                <div style="display:flex;flex-wrap: wrap">
                    <div style="width: 40px">省份</div>
                    <div style="width:90%;display:flex;flex-wrap: wrap">
                        <div *ngFor="let prov of provList">
                            <a class="mr-sm">
                                <span>{{prov}}</span>
                            </a>
                        </div>
                    </div>
                </div>

                <div style="display:flex;flex-wrap: wrap;padding-top: 1rem">
                    <div style="width: 40px">类别</div>
                    <div style="width:90%;display:flex;flex-wrap: wrap">
                        <div *ngFor="let prov of styleList">
                            <a class="mr-sm">
                                <span>{{prov}}</span>
                            </a>
                        </div>
                    </div>
                </div>


                <div style="display:flex;flex-wrap: wrap;padding-top: 1rem">
                    <div style="width: 40px">预算</div>
                    <div style="width:90%;display:flex;flex-wrap: wrap">
                        <div *ngFor="let prov of priceList">
                            <a class="mr-sm">
                                <span>{{prov}}</span>
                            </a>
                        </div>
                    </div>
                </div>
            </nz-card>
        </nz-card>
    </div>

    <div class="business-title-container" style="width: 100%;">
        <div class="business-title act-list-title" nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18">活动列表</div>
        <div class="business-title-more hot-act-title" nz-col nzXs="24" nzSm="7"
             nzMd="7" nzLg="6">热门活动
        </div>
    </div>

    <div nz-row nzGutter="16" class="act-list-body-container">
        <div nz-col nzXs="24" nzSm="17" nzMd="17" nzLg="18" class="padding-left-right-5px">
            <nz-card nzNoPadding class="business-card">
                <div class="list-head-container">
                    <div class="list-head-title">标题</div>
                    <div class="list-head-word">地区</div>
                    <div class="list-head-word">时间</div>
                    <div class="list-head-word">类型</div>
                    <div class="list-head-word">金额</div>
                </div>
                <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                     class="py-sm bg-grey-lighter-h point border-top"
                     *ngFor="let item of actList;let i =index">
                    <div class="business-list-container" [routerLink]="['/activity/detail-acti',item.actId]">
                        <div class="list-content-title">
                            <div nz-col [nzSpan]="6" class="text-center">
                                <nz-avatar [nzSrc]="'./assets/img/' + item.avatar + '.png'"
                                           [nzSize]="'large'"></nz-avatar>
                            </div>
                            <div nz-col [nzSpan]="18">
                                <p class="list-topic overFlow">{{item.actName}}</p>
                            </div>
                        </div>

                        <div class="list-content-word">
                            {{item.actPlace}}
                        </div>
                        <div class="list-content-time-container">
                            <div class="list-content-time">
                                {{item.actBegDate}}
                            </div>
                            <div class="list-content-time">
                                至
                            </div>
                            <div class="list-content-time">
                                {{item.actEndDate}}
                            </div>

                        </div>
                        <div class="list-content-word">
                            {{item.actType}}
                        </div>
                        <div class="list-content-word">
                            ￥{{item.actMoney}}
                        </div>

                    </div>
                </div>

                <!--分页举例-html部分 不需要进行改动，直接复制使用-->
                <div class="page-container">
                    <nz-pagination [(nzPageIndex)]="page.pageNum" [nzTotal]="page.total"
                                   [(nzPageSize)]="page.pageSize" (nzPageIndexChange)="getPage(page.pageNum)">
                    </nz-pagination>
                </div>

            </nz-card>
        </div>
        <div nz-col nzXs="24" nzSm="7" nzMd="7" nzLg="6" class="padding-left-right-5px act-list-side-container">
            <div class="padding-left-right-5px">
                <nz-card [nzNoPadding]="true" class="padding-left-right-5px">
                    <ul>
                        <li *ngFor="let hot of hotList; let idx = index">

                            <a style="flex-wrap: nowrap" href="./myhero/detail-acti"> {{idx+1}}.{{hot.text}}</a>

                        </li>
                    </ul>
                </nz-card>
            </div>

            <div class="business-title-more hot-act-title">优惠社团排行榜</div>
            <div class="padding-left-right-5px">
                <nz-card [nzNoPadding]="true" class="padding-left-right-5px">
                    <ul style="display: flex;flex-wrap: wrap">

                        <li *ngFor="let pre of preList" style="width: 50%;">
                            <div style="display: flex;flex-direction: column">
                                <a> <img [src]="pre.image" style="border-radius : 90%"></a>
                                <span style="justify-content: center">{{pre.desc}}</span>
                            </div>
                        </li>

                    </ul>
                </nz-card>
            </div>
            <div class="business-title-more hot-act-title">关注校园公众号</div>
            <div class="padding-left-right-5px">
                <nz-card [nzNoPadding]="true" class="padding-left-right-5px">
                    <img src="assets/img/1.png">
                </nz-card>

            </div>
            <div class="padding-left-right-5px">
                <nz-carousel nzAutoPlay>
                    <img nz-carousel-content [src]="slide.image" *ngFor="let slide of slides">
                </nz-carousel>
            </div>
        </div>
    </div>

</div>
